import React, {useEffect, useState} from 'react'
import {Button, Space, Row} from 'antd'
import {connect} from 'umi'
import {useLocation} from 'react-router'
import Basis from './basis'
import CarInfo from './carInfo'
import CheckCarInfo from './checkCarInfo'
import Contract from './contract'
import DeliveryCarInfo from './deliveryCarInfo'
// import OtherOrder from './otherOrder';
import RenewInfo from './renewInfo'
import ExchangeCar from '../exchangeCar'
import ExchangeCarInfo from '../exchangeCarInfo'
import ReturnCar from '../../returnCar'
import ReturnCheckCar from '../../returnCar/returnCheckCar'
import BindCar from '../../car/bindCar'
import CheckCar from '../../car/checkCar'
import Delivery from '../../car/delivery'
import Signing from '../../car/signing'
import {scrollToAnchor} from '@/utils'
import TransferOfNames from '../../transferOfNames/index'
import FileUserInfo from '../../transferOfNames/fileUserInfo'
import {
	getOrderDetails,
	getRenewalRecord,
	getTransferDetails,
} from '@/service/order'

function Operate() {
	// 获取路由中订单编号
	const location: any = useLocation()
	const datas = location?.query?.type
	const [data, setDate] = useState<any>()
	const [step, setStep] = useState(0)
	const [binCar, setBinCar] = useState(1) // 绑车
	const [vehicleCar, setVehicleCar] = useState(1) // 验车
	const [contract, setContract] = useState(1) // 合同
	const [handoverCar, setHandoverCar] = useState(1) // 交车
	const [changeCar, setChangeCar] = useState(1) // 换车
	const [changeCars, setChangeCars] = useState(2) // 换车状态
	const [returnCar, setReturnCar] = useState(1) // 退车
	const [returnCheckCar, setReturnCheckCar] = useState(1) // 退车验车
	const [returnCheckCarPay, setReturnCheckCarPay] = useState(1) // 退车验车费用项
	const [transferOfName, setTransferOfNames] = useState(2) // 过户
	const [transInfo, setTransInfo] = useState(2) // 过户信息
	const [steps, setSteps] = useState('') // 是否可以操作
	const [orderId, setOrderId] = useState('') // 订单id
	const [tenewalStatus, setRenewalStatus] = useState(2)
	useEffect(() => {
		const data1 = datas?.split('/')[1]
		const id = data1?.split('=')[1]
		setOrderId(id)
		const steps1 = datas?.split('/')[0]
		setSteps(steps1)
		if (steps1 === 'carInfo') {
			setBinCar(1)
			setStep(1)
			setTransferOfNames(2)
			setTransInfo(2)
		} else if (steps1 === 'checkCarInfo') {
			setStep(2)
			setBinCar(2)
			setVehicleCar(1)
			setTransferOfNames(2)
			setTransInfo(2)
		} else if (steps1 === 'contract') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setStep(3)
		} else if (steps1 === 'deliveryCarInfo') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setStep(4)
		} else if (steps1 === 'exchangeCar') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setStep(5)
		} else if (steps1 === 'carInfos') {
			setBinCar(2)
			setStep(1)
			setTransferOfNames(2)
			setTransInfo(2)
		} else if (steps1 === 'returnCar') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(2)
			setReturnCar(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setStep(6)
		} else if (steps1 === 'returnCheckCar') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(2)
			setReturnCar(2)
			setReturnCheckCar(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setReturnCheckCarPay(2)
			setStep(7)
		} else if (steps1 === 'returnCheckCars') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(2)
			setReturnCar(2)
			setReturnCheckCar(2)
			setReturnCheckCarPay(1)
			setTransferOfNames(2)
			setTransInfo(2)
			setStep(8)
		} else if (steps1 === 'transferOfNames') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(2)
			setReturnCar(2)
			setReturnCheckCar(2)
			setTransferOfNames(1)
			setTransInfo(2)
			setStep(4)
		} else if (steps1 === 'returnCheckCarInfo') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setChangeCar(2)
			setReturnCar(2)
			setReturnCheckCar(2)
			setTransferOfNames(2)
			setTransInfo(1)
			setStep(4)
		} else if (steps1 === 'exchangeCarInfo') {
			setBinCar(2)
			setVehicleCar(2)
			setContract(2)
			setHandoverCar(2)
			setStep(4)
		}
		getOrderDetails(id).then((res: any) => {
			if (res.success) {
				setDate(res.data)
				if (res?.data?.plateNo) {
					if (steps === 'carInfos') {
						setBinCar(2)
					} else {
						setBinCar(1)
					}
				} else {
					setBinCar(2)
				}
			}
		})
	}, [steps])
	useEffect(() => {
		// 有没有换车信息
		if (orderId) {
			getTransferDetails(orderId).then((res: any) => {
				if (res.success) {
					if (res?.data?.quondamOrderCarId) {
						setChangeCars(1)
					} else {
						setChangeCars(2)
					}
				}
			})
		}
	}, [orderId, changeCars])
	useEffect(() => {
		// 续签信息
		if (data?.id) {
			const queryDataXQ = {
				pristineOrderCarId: data?.id,
			}
			const queryData = {
				quondamOrderCarId: data?.id,
			}
			getRenewalRecord(
				data?.isRelet === 1 ? queryDataXQ : queryData,
			).then((res: any) => {
				if (res?.success) {
					if (res?.data?.total > 0) {
						setRenewalStatus(1)
					} else {
						setRenewalStatus(2)
					}
				}
			})
		}
	}, [data])
	return (
		<div>
			<Row style={{justifyContent: 'center', background: '#fff'}}>
				<Space>
					{/*  */}
					<Button onClick={() => scrollToAnchor('basis')}>
						基础信息
					</Button>
					{step > 0 && (
						<Button onClick={() => scrollToAnchor('carInfo')}>
							绑车信息
						</Button>
					)}
					{step > 1 && (
						<Button onClick={() => scrollToAnchor('checkCarInfo')}>
							验车信息
						</Button>
					)}
					{tenewalStatus === 1 && (
						<Button onClick={() => scrollToAnchor('renewInfo')}>
							续签信息
						</Button>
					)}
					{step > 2 && (
						<Button onClick={() => scrollToAnchor('contract')}>
							合同信息
						</Button>
					)}
					{step > 3 && (
						<Button
							onClick={() => scrollToAnchor('deliveryCarInfo')}>
							交车信息
						</Button>
					)}
					{step > 3 && step <= 5 && changeCars === 1 && (
						<Button onClick={() => scrollToAnchor('exchangeCar')}>
							换车信息
						</Button>
					)}
					{/* {steps==='exchangeCarInfo' && <Button onClick={() => scrollToAnchor('exchangeCarInfo')}>换车费用项填写</Button>}   */}
					{/* <Button onClick={() => scrollToAnchor('otherOrder')}>其他关联单据信息</Button> */}

					{step > 5 && (
						<Button onClick={() => scrollToAnchor('returnCar')}>
							退车信息
						</Button>
					)}
					{transferOfName === 1 && (
						<Button onClick={() => scrollToAnchor('transfer')}>
							过户信息
						</Button>
					)}
					{/* {  transInfo===1 && <Button onClick={() => scrollToAnchor('transInfo')}>过户费用项</Button>} */}
				</Space>
			</Row>
			{/* 基本信息 */}
			<Basis info={data} />

			{/* 绑车 如果已经绑车，则直接显示信息  */}
			{step > 0 && (
				<>
					{binCar === 1 ? (
						<CarInfo info={data} />
					) : (
						<BindCar info={data} />
					)}
				</>
			)}

			{/* 验车 如果已经验车，直接展示验车信息 */}
			{step > 1 && (
				<>
					{vehicleCar === 1 ? (
						<CheckCar info={data} />
					) : (
						<CheckCarInfo info={data} />
					)}
				</>
			)}
			{/* 续签信息 */}
			{tenewalStatus === 1 && <RenewInfo info={data} />}

			{/* 签约【合同】 */}
			{step > 2 && (
				<>
					{contract === 1 ? (
						<Signing info={data} />
					) : (
						<Contract info={data} />
					)}
				</>
			)}

			{/* 交车 */}
			{step > 3 && (
				<>
					{handoverCar === 1 ? (
						<Delivery info={data} />
					) : (
						<DeliveryCarInfo info={data} />
					)}
				</>
			)}

			{/* 换车 */}
			{/* {step > 4 && (
				<>
					{changeCars === 1 && (
						<>
							{changeCar === 1 ? (
								<ExchangeCar infos={data} />
							) : (
								<ExchangeCarInfo info={data} />
							)}
						</>
					)}
				</>
			)} */}
			{step > 3 && steps === 'exchangeCar' && (
				<ExchangeCar infos={data} />
			)}
			{/* 换车缴费 */}
			{steps === 'exchangeCarInfo' && <ExchangeCarInfo info={data} />}

			{/* 退车 */}
			{step > 5 && (
				<>{returnCar === 1 ? <ReturnCar info={data} /> : ''}</>
			)}

			{/* 退车验车 */}
			{step > 6 && (
				<>
					{returnCheckCar === 1 ? <ReturnCheckCar info={data} /> : ''}
				</>
			)}
			{/* 退车缴费 */}
			{step > 7 && (
				<>
					{returnCheckCarPay === 1 ? (
						<ReturnCheckCar info={data} state="pay" />
					) : (
						''
					)}
				</>
			)}

			{/* 过户 */}
			{transferOfName === 1 ? <TransferOfNames info={data} /> : ''}

			{/* 过户信息 */}
			{transInfo === 1 ? <FileUserInfo info={data} /> : ''}
			{/*
      <OtherOrder />
      <RenewInfo /> */}
		</div>
	)
}

export default connect(({global, order: {details}}: any) => ({
	global,
	details,
}))(Operate)
